<template>
	<view class="px-3">
		<view>
			<view class="item-from py-3 flex">
				<view class="title">持卡人</view>
				<view class="w-max-100">
					<input class="w-max-100" v-model="name" type="text" placeholder="请输入持卡人姓名">
				</view>
			</view>
			<view class="item-from py-3 flex">
				<view class="title">手机号</view>
				<view class="w-max-100">
					<input class="w-max-100" v-model="mobile" type="text" placeholder="请输入持卡人手机号">
				</view>
			</view>
			<view class="item-from py-3 flex">
				<view class="title">卡号</view>
				<view class="w-max-100">
					<input class="w-max-100" v-model="card_num" type="text" placeholder="请填写卡号">
				</view>
			</view>
			<view class="item-from py-3 flex">
				<view class="title">银行</view>
				<view class="w-max-100">
					<picker :range="bankList" range-key="name" :value="bankIndex" @change="bankChange" class="w-max-100">
						<view class="w-max-100">{{bankIndex >= 0 ? bankList[bankIndex].name : '请选择银行'}}</view>
					</picker>

					
					
				</view>
			</view>
			<view class="item-from py-3 flex">
				<view class="title">是否设为默认</view>
				<view class="">
					<switch style="zoom: .8;" :checked="is_default != 0?true:false" @change="is_default = 0?is_default = 1 : is_default = 1" color="#75BE0D" />
				</view>
			</view>
		</view>
		<view class="add-btn mt-5" @click="addCar">添加</view>
	</view>
</template>

<script>
	import { postAddCard, postBankList } from "../../api/user.js"
	export default {
		data() {
			return {
				bankList: [], // 银行卡列表
				bankIndex: -1,
				name: "", // 持卡人姓名
				mobile: "", // 手机号
				bank: "", // 开户行
				card_num: "", // 卡号
				is_default: 0, // 是否默认
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init(){
				this.getBank()
			},
			// 银行picker
			bankChange(e) {
				
				console.log(e);
				this.bankIndex = e.detail.value
			},
			
			// 银行卡列表
			async getBank() {
				var res = await postBankList();
				if(res.data.code == 1) this.bankList = res.data.data;
			},
			
			// 提交表单
			async addCar() {
				var data = {
					name: this.name, // 持卡人姓名
					mobile: this.mobile, // 手机号
					bank_id: this.bankIndex >= 0 ? this.bankList[this.bankIndex].id : '', // 开户行
					card_num: this.card_num, // 卡号
					is_default: this.is_default, // 是否默认
				}
				data.token = uni.getStorageSync('token');
				var res = await postAddCard(data);
				if(res.data.code == 1) {
					uni.showToast({
						title: "添加成功"
					})
					setTimeout(()=> {
						uni.navigateBack()
					},2000)
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
				}
			}
		}
	}
</script>

<style scoped>
.w-max-100 {
	width: 100%;
}
.item-from  {
	font-size: 28rpx;
	color: 272727;
	border-bottom: solid 3rpx #e7e7e2;
	align-items: center;
}
input {
	font-size: 28rpx;
}
.title {
	width: 200rpx;
}
.add-btn {
		width: 100%;
		height: 90rpx;
		background-color: #75BE0D;
		font-size: 32rpx;
		text-align: center;
		line-height: 90rpx;
		color: #FFFFFF;
		border-radius: 45rpx;
	}
</style>
